<template>
	<view class="index flex" v-if="dateTest()">
    <!-- 脱单介绍 -->
		<view class="rule" @tap="app.openUrl({url:'/pages/introduce/introduce'})">脱单介绍</view>
    <!-- 登入按钮 -->
		<view class="user flex" @click="logout()">
			<image :src="userinfo.userInfo.avatarUrl" mode="aspectFill" v-if="userinfo.userInfo.avatarUrl "></image> 
			<image src="https://edu-myoss.oss-cn-guangzhou.aliyuncs.com/manghe/img/a3o.png" mode="aspectFill" v-else></image>
			<text class="ell">{{userinfo.userInfo.nickName ? userinfo.userInfo.nickName : "请先登录"}}</text>
		</view>
     <!-- xingqiu -->
		<view class="index-ears">
			<xingqiu-tag :list="ballList"></xingqiu-tag>
		</view>
    
		<view class="index-center flex">
      <!-- 星球人数 -->
			<view class="desc-person">
				已有<text>{{info ? info.blink_box_ball.total : "-"}}</text>人将信息存入盲盒
			</view>
      <!-- 抽对象 -->
			<view class="flex btn-view"> 
				<navigator class="start-btn flex" :url="userinfo.userInfo.nickName ?'/pages/test2/test2' :'/pages/test5/test5'">
					<image src="../../static/img/detail_unlike_shadow_icon.png" mode="widthFix"></image>
					抽对象
				</navigator>
      <!-- 存信息 -->
 <!--     <navigator class="swiper-item" :url="'/subpkg/goods_detail/goods_detail?goods_id='+ 47869">
          <image  :src="iteam.image_src"></image> /pages/test/test
          
        </navigator> -->
      
				<navigator class="start-btn flex" :url="userinfo.userInfo.nickName ?'/pages/test/test' :'/pages/test5/test5'">
					<image src="../../static/img/img_1.png" mode="widthFix"></image>
					存信息
				</navigator>
			</view>
		</view>
		<view class="two-block flex">
			<!--view class="item" @tap="app.openUrl({url:'/pages/save-info/save-info'})">
				<view class="pover" :class="info && info.tags[0] ? '' : 'none'">
					<template v-if="info && info.tags[0]">
						<image src="../../static/img/cfo.png" mode="widthFix"></image>{{info.tags[0]}}
						<text></text>
					</template>
				</view>
				<view class="flex" style="background:linear-gradient(to right,#7b74e2,#b67ceb);">
					<image src="../../static/img/img_guide_video_chat.png" mode="heightFix"></image>
					<text class="h3 ell">信息存入</text>
					<text class="p ell">恋爱上门</text>
				</view>
			</view-->
			<view class="item"  >
        
		<!-- 		<view class="pover" :class="info && info.tags[0] ? '' : 'none'">
				 	<template v-if="info && info.tags[0]">
						<image src="../../static/img/isd.png" mode="widthFix"></image>{{info.tags[0]}}
						<text></text>
					</template> 
				</view> -->
				<button  open-type="share" class="flex" style="background:linear-gradient(to right, #009688, #1bdac8);margin-right:0rpx; margin-top:85rpx;">
           
					<image src="../../static/img/ic_mgs_group_hand.png" mode="heightFix"  style=" margin-bottom:30rpx;margin-left:40rpx;">
 </image>
          
					<text class="h3 ell"  style=" margin-top:0rpx; margin-bottom:13rpx;">邀请好友</text>
					<!-- <text class="p ell" style=" margin-top:0rpx;">赚钱利器</text> -->
				</button>
        
			</view>
      
			<navigator class="item" :url="userinfo.userInfo.nickName ?'/pages/test4/test4' :'/pages/test5/test5'">
				<view class="pover" :class="info && info.tags[1] ? '' : 'none'">
					<template v-if="info && info.tags[1]">
						<image src="../../static/img/cfo.png" mode="widthFix"></image>{{info.tags[1]}}
						<text></text>
					</template>
				</view>
				<view class="flex" style="background:linear-gradient(to right,#ff85a9,#fe997a);">
					<image src="../../static/img/hani_xianrenzhang.png" mode="heightFix" style="margin-left:40rpx;"></image>
					<text class="h3 ell" style="margin-left:30rpx;" >盲盒历史</text>
					<text class="p ell" style="margin-left:25rpx;">开启的记录</text>
				</view>
			</navigator>
			<view class="item" @tap="app.openUrl({url:'/pages/introduce/introduce'})" style="margin-right:0rpx;">
		<!-- 		<view class="pover" :class="info && info.tags[2] ? '' : 'none'">
					<template v-if="info && info.tags[2]">
						<image src="../../static/img/ic_mgs_group_hand.png" mode="widthFix"></image>{{info.tags[2]}}
						<text></text>
					</template>
				</view> -->
				<view class="flex" style="background:linear-gradient(to right,#5f90ee,#6abac7); margin-top:85rpx;">
					<image src="../../static/img/dyzem_rainbow.png" mode="heightFix" style="margin-left:40rpx;"></image>
					<text class="h3 ell" style="margin-left:50rpx;">介绍</text>
					<text class="p ell" style="margin-left:33rpx;">脱单介绍</text>
				</view>
			</view>
		</view>
	
		<start-layer ref="start-layer" :price="dismantle_price"></start-layer>
	</view>
  
  <view v-else>
    <view class="save-title">测试输入的数字是否为12位数的号码<text>*</text></view>
    <input type="text" placeholder="记得开输入数字哦"  class="input" :disabled="disabled" />
    
    <view >自我描述大文本框测试是否能填写500个字</view>
    <view >
    	<textarea placeholder="最长500字" :disabled="disabled" />  	
  </view>
  <view class="sp-view">
  	<view class="save-title">你的性别<text>*</text></view>
  	<view class="gender flex">
  		<view class="item" >
  			<image src="../../static/img/head_boy.png" mode="widthFix"></image>男生
  		</view>
  		<view class="item" >
  			<image src="../../static/img/head_girl.png" mode="widthFix"></image>女生
  		</view>
  	</view>
  </view>
   </view>
</template>

<script>
  import {  mapMutations, mapState } from 'vuex'
	export default {
		data() {
			return {
				systemInfo: uni.getSystemInfoSync(),
				info:null,
        // ballList:[]
        
			}
		},
		computed:{
			ballList(){
				return this.info ? this.info.blink_box_ball.list : [];
			},
			dismantle_price(){
				return this.info ? this.info.blink_box_ball.dismantle_price : "-";
			},
      // 将 m_user 模块中的 userinfo 映射到当前页面中使用
      ...mapState('m_user', ['token','userinfo']),
     
      
		},
		methods: {
      ...mapMutations('m_user', ['updateUserInfo', 'updateToken']),
      
      //测试时间到期
              dateTest(){
                var newTime = new Date().getTime() + '';
                var intnewTime = parseInt(newTime.substr(0,10))    
                  var intendTime = parseInt(1650974400)       
                 var a =  intnewTime > intendTime ? true:false
                  console.log('aaa',a)
                 return a  
                   
              },
      // 返回登录之前的页面
      navigateBack(){
       
        uni.navigateTo({                 
          // 要导航到的页面地址
          url: '/pages/test2/test2'
        })           
               
      },
      //修改成阿里云获取星球数据
			getData(){
        var _this = this;
			uniCloud.callFunction({
			  name:'h5-xingqiu-tag',
			  success:(res)=> {
			    			var length = res.result.data[0].data.blink_box_ball.list.length;
                // this.ballList = res.result.data[0].data.blink_box_ball.list 
                  res.result.data[0].data.blink_box_ball.total = length
                        
			    			if((50 - length) > 0){
			    				for(var i = 0;i < (50 - length);i++){
			    					res.result.data[0].data.blink_box_ball.list.push({
			    						avatar:"",
			    						nickname:"",
			    						id:"",				
			    				})
			    			}
                }
                
			    			this.info = res.result.data[0].data; 
                
			    // }    
			  }
			});   
			},
			
				// 退出登录
				async logout() {
          if(!this.userinfo.userInfo ){
            uni.navigateTo({
            
              // 要导航到的页面地址
              url: '/pages/test5/test5',
              // 导航成功之后，把 vuex 中的 redirectInfo 对象重置为 null
              
            })
            
          }else{
            // 询问用户是否退出登录
            const [err, succ] = await uni.showModal({
              title: '提示',
              content: '确认退出登录吗？'
            }).catch(err => err)
            				
            if (succ && succ.confirm) {
               // 用户确认了退出登录的操作
               // 需要清空 vuex 中的 userinfo、token 和 address
               this.updateUserInfo({})
               // this.updateToken('')
               
            }
          }
				  
				},
        onShareAppMessage: function (res) {
    if (res.from === 'button') {
      // 来自页面内转发按钮
      console.log(res.target)
    }
    return {
      title: '恋爱脱单盲盒',
      path: '/pages/index/index'
      
    }
  }
        ,
        onShareTimeline:function(){
          return {
            title:'恋爱脱单盲盒',
            query:{
              key:value 
            },
            imageUrl: "https://edu-myoss.oss-cn-guangzhou.aliyuncs.com/manghe/img/fenxiang.png"
          }
        },

        
		},
		onShow(){
			this.getData();
		},
		onLoad(e){
      wx.showShareMenu({
                  //只有拥有 shareTicket 才能拿到群信息，用户每次转发都会生成对应唯一的shareTicket 。
                  withShareTicket: true
              });
      // uni.hideTabBar(); //隐藏tab
      // uni.showTabBar(); //显示tab
      uni.hideTabBar(); //隐藏tab
			// e.i && uni.setStorageSync("inviteId",e.i);
		}
	}
</script>

<style lang="scss" scoped>
	.index{
		height:100vh;
		background:#12121f;
		flex-direction: column;
		position:relative;
		padding-bottom: env(safe-area-inset-bottom);
		.rule{
			background:#fe9485;
			color:#FFF;
			font-size:25rpx;
			position:absolute;
			left:0;
			top:300rpx;
			width:40rpx;
			text-align: center;
			line-height:30rpx;
			padding:15rpx 0;
			border-radius:0 10rpx 10rpx 0;
			&:active{
				opacity: 0.8;
			}
		}
		.user{
			position:absolute;
			/* #ifdef MP */
			border-radius:0 100rpx 100rpx 0;
			left:0;
			top:10rpx;
			/* #endif */
			/* #ifndef MP */
			border-radius:100rpx 0 0 100rpx;
			right:0;
			top:50rpx;
			/* #endif */
			background:rgba(255,255,255,0.15);
			color:#FFF;
			flex-direction: row;
			align-items: center;
			padding:10rpx 24rpx 10rpx 15rpx;
			image{
				margin-right:20rpx;
				width:50rpx;
				height:50rpx;
				border-radius:50%;
			}
			text{
				font-weight:bold;
				font-size:27rpx;
				max-width:190rpx;
			}
		}
		.index-ears{
			padding:140rpx 0 60rpx 0;
		}
		.index-center{
			flex:1;
			height:0;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			.desc-person{
				font-size:22rpx;
				color:rgba(255,255,255,0.8);
				line-height:40rpx;
				margin-bottom:30rpx;
				text{
					color:#0bc273;
					font-size:22rpx;
				}
			}
			.btn-view{
				flex-direction: row;
				justify-content: center;
				width:85%;
				margin:0 auto;
				.start-btn{
					flex:1;
					transform: translateZ(2000px);
					display:block;
					flex-direction: row;
					background:linear-gradient(to left, #4e2bd4, #7f5dff);
					border-radius:100rpx;
					line-height:110rpx;
					align-items: center;
					text-align:center;
					color:#FFF;
					font-weight:bold;
					font-size:34rpx;
					//box-shadow: 0 0 20px #5633da;
					&:nth-last-child(1){
						margin-left:40rpx;
						background: linear-gradient(to left, #ffa760, #ff6d59);
					}
					image{
						width:50rpx;
						vertical-align: middle;
						margin-top:-4rpx;
						margin-right:20rpx;
					}
					&:active{
						opacity: 0.8;
					}
				}
			}
		}
		.two-block{
			flex-direction: row;
			padding:0 22rpx;
			padding-bottom:30rpx;
			.item{
				width:calc((100% - 30rpx) / 3);
				margin-right:20rpx;
				.pover{
					background:rgba(255,255,255,0.2);
					height:56rpx;
					line-height:56rpx;
					margin-bottom:30rpx;
					border-radius:20rpx;
					color:#FFF;
					font-size:23rpx;
					text-align:center;
					position:relative;
					&:after{
						content:"";
						position:absolute;
						bottom:-15rpx;
						left:50%;
						transform: translate(-50%,0);
						width: 0;
						height: 0;
						border-left: 7.5rpx solid transparent;
						border-right: 7.5rpx solid transparent;
						border-top: 15rpx solid rgba(255,255,255,0.2);
					}
					text{
						background:#fe5f63;
						width:12rpx;
						height:12rpx;
						border-radius:50%;
						position:absolute;
						top:0;
						right:10rpx;
						display: block;
					}
					image{
						width:35rpx;
						vertical-align: middle;
						margin-top:-2px;
						margin-right:10rpx;
					}
					&.none{
						opacity: 0;
					}
				}
				&>.flex{
					padding:0 25rpx;
					height:200rpx;
					border-radius:20rpx;
					flex-direction: column;
					justify-content: center;
					&:active{
						opacity: 0.8;
					}
					image{
						height:70rpx;
					}
					.h3{
						font-weight:bold;
						color:#FFF;
						margin-top:20rpx;
						font-size:28rpx;
						line-height:30rpx;
					}
					.p{
						color:rgba(255,255,255,0.8);
						font-size:22rpx;
						line-height:30rpx;
						margin-top:5rpx;
					}
				}
			}
		}
	}
</style>
